<template>
  <div class="cart-box">
    <div class="cart-filter-bar">
      <ul class="switch-cart">
        <li class="switch-cart-item">
          <span class="all-product-num">全部商品</span><span class="number">{{ cartlistData.length }}</span>
        </li>
      </ul>
    </div>
    <div class="clr" />
    <div class="cart-thead">
      <div class="column t-checkbox">
        <div class="cart-checkbox">
          <input
            v-model="allChecked"
            type="checkbox"
            name="select-all"
            class="mfcheckbox"
            @change="selectAll"
          >
        </div>
        全选
      </div>
      <div class="column t-goods">商品</div>
      <div class="column t-props">&nbsp;</div>
      <div class="column t-price">单价</div>
      <div class="column t-quantity">数量</div>
      <div class="column t-sum">小计</div>
      <div class="column t-action">操作</div>
    </div>
    <div class="cart-tbody">
      <div class="shop">
        <div class="shop-txt">
          <div class="shop-icon-box"><img src="../../../assets/image/shop-icon.png" alt=""></div>
          <div>{{ storeName }}</div>
        </div>
      </div>
      <div class="item-list">
        <div class="item-combine">
          <div v-for="(item,index) in cartlistData" :key="index" class="item-item ">
            <div class="item-form">
              <div class="cell p-checkbox">
                <div class="cart-checkbox">
                  <input v-model="item.checked" type="checkbox" name="checkItem" class="mfcheckbox" @change="selected(item)">
                </div>
              </div>
              <div class="cell p-goods">
                <div class="goods-item">
                  <div class="p-img ">
                    <img :src="item.productPic" :alt="item.productName">
                  </div>
                </div>
                <div class="p-msg">
                  <div class="p-name">
                    {{ item.productName }}
                  </div>

                </div>
              </div>
              <div class="cell p-props">
                <div class="props-txt">
                  <span class="">{{ item.productSubTitle }}</span>
                </div>
              </div>
              <div class="cell p-price">
                <span class="p-price-cont">￥{{ item.priceDouble }}</span>

              </div>
              <div class="cell p-quantity">
                <div class="cart-number quantity ">
                  <button class="cart-number-dec is-disabled" @click="subNum(item)">
                    <i class="cart-icon-subt" />
                  </button>
                  <div class="cart-input">
                    <input v-model="item.quantity" class="cart-input-o" value="1" @input="numIptFn(item)">
                  </div>
                  <button class="cart-number-inc" @click="addNum(item)">
                    <i class="cart-icon-add" />
                  </button>
                </div>
                <p class="ac ftx03">有货</p>
              </div>
              <div class="cell p-sum"><strong>¥{{ (item.priceDouble * item.quantity).toFixed(2) }}</strong></div>
              <div class="cell p-ops" @click="delCartItemFn(item)"><a href="#none" class="p-ops-item">删除</a>
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>

    <!-- 底部按钮 -->
    <div>
      <div>

        <div class="cart-floatbar " style="position: static; transform: none; top: auto; bottom: 0px;">
          <div class="cart-floatbar cart-floatbar-fixed">
            <div class="cart-toolbar">
              <div class="select-all">
                <input
                  v-model="allChecked"
                  type="checkbox"
                  class="mfcheckbox"
                  @change="selectAll"
                >全选</div>
              <div class="operation">
                <a href="#none" class="opt-batch-remove">删除选中的商品</a>

                <a href="#none" class="opt-cleaner" title="亲，点我可快速清理购物车商品哦！">
                  <strong>清理购物车</strong>
                </a>
              </div>
              <div class="price-sum">
                <div>
                  <div class="price-sum-amount">
                    <div class="price-show">
                      <span class="amount-sum">已选择<em class="ckeckednum">{{ totalNum }}</em>件商品</span>
                      <span class="txt">总价：</span>
                      <div class="price priceShow"><span class="total-price">¥{{ totalPrice.toFixed(2) }}</span></div>

                    </div>

                  </div>

                </div>
              </div>
              <div class="combine" @click="goGetOrderInfoFn">
                <div class="btn-area">
                  去结算
                </div>

              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <div v-if="cartlistData.length == 0" class="nodata">
      <img src="../../../assets/image/no-img.png" alt="">
      <div>
        空空如也~
      </div>

    </div>
  </div>
</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'
import { _cartItemList, _cartItemDeletet } from '@/api/homePage'
export default {
  name: 'Cart',
  components: {
  },
  data() {
    return {
      totalNum: 0, // 已选择的商品数量
      totalPrice: 0, // 总价
      storeName: '', // 店面名称
      cartlistData: [],
      allChecked: false// 全部选中

    }
  },
  mounted() {
    this.cartListFn()
  },
  methods: {
    async cartListFn() {
      this.cartlistData = []
      const params = {
        memberUserId: 1
      }
      const itemchecked = { checked: false }
      const { result } = await _cartItemList(params)
      result.data.forEach(item => {
        const res = Object.assign(item, itemchecked)
        this.cartlistData.push(res)
      })
      this.storeName = this.cartlistData[0].storeName
    },
    // 全选
    selectAll() {
      if (this.allChecked) {
        this.cartlistData.map((item) => {
          this.checked = true
          item.checked = true
        })
      } else {
        this.checked = false
        this.cartlistData.map((item) => {
          item.checked = false
        })
      }
      this.totalFn()
    },
    // 勾选商品
    selected(item) {
      if (!item.checked) {
        this.allChecked = false
      } else {
        let allChecked = true
        this.cartlistData.forEach((item) => {
          if (!item.checked) {
            allChecked = false
          }
        })
        this.allChecked = allChecked
      }
      this.totalFn()
    },
    // 减
    subNum(item) {
      let num = item.quantity
      if (num > 1) {
        num -= 1
      }
      item.quantity = num
      this.totalFn()
    },
    // 数量加
    addNum(item) {
      const num = Number(item.quantity)
      item.quantity = num + 1
      if (Number(item.quantity) >= Number(item.itemStock)) {
        item.quantity = item.itemStock
        _validate.openTip(this, '已是最大库存', 'warning')
      }
      this.totalFn()
    },
    // 输入框
    numIptFn(item) {
      if (Number(item.quantity) === 0) {
        item.quantity = 1
      } else {
        item.quantity = item.quantity.replace(/[^0-9]/g, '')
        if (item.quantity >= item.itemStock) {
          item.quantity = item.itemStock
          _validate.openTip(this, '已是最大库存', 'warning')
        }
      }
      this.totalFn()
    },
    // 统计
    totalFn() {
      this.totalNum = 0
      this.totalPrice = 0
      this.cartlistData.forEach((item) => {
        item.checked ? (this.totalNum += item.quantity) : (this.totalNum += 0)
        item.checked ? (this.totalPrice += item.quantity * item.priceDouble) : (this.totalPrice += 0)
      })
    },
    // 单个删除商品
    delCartItemFn(item) {
      const params = {
        itemId: item.itemId,
        memberUserId: 1,
        storeId: item.storeId,
        storeItemId: item.storeItemId
      }

      this.$confirm('确定要删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          _cartItemDeletet(params).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.cartListFn()
          })
        })
    },
    // 去结算
    goGetOrderInfoFn() {
      this.$router.push({
        path: '/submitOrder/getOrderInfo'
      })
    }

  }

}
</script>
<style scoped lang="scss">
.cart-box{
  width: 1200px;
  background: #fff;
  margin:  0 auto;
  cursor: pointer;
  .nodata{
    text-align: center;
    padding: 200px;
    color: #666;
  }
  .clr{
    display: block;
    overflow: hidden;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
  }
  .cart-filter-bar {
    margin-top: 10px;
    position: relative;
    z-index: 100;
    width: 100%;
    height: 40px;
   .switch-cart {
    float: left;
    position: relative;
    overflow: hidden;
   .switch-cart-item {

    font-weight: 700;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding: 0 0 10px;
    cursor: pointer;
    margin: 5px 30px 0 11px;
    .all-product-num {
    color: #e2231a;
}
 .number {
    color: #e2231a;
    font-size: 14px;
    margin-left: 5px;
}
}
}
}
  .cart-thead{

    height: 32px;
    line-height: 32px;
    margin: 0 0 10px;
    padding: 5px 0;
    background: #f3f3f3;
    border: 1px solid #e9e9e9;
    border-top: 0;
    position: relative;
    display: flex;
   .column {

    }
    .t-checkbox {
    height: 18px;
    line-height: 18px;
    padding-top: 7px;
    width: 122px;
    padding-left: 11px;
 .cart-checkbox {
    position: relative;
    z-index: 3;
    float: left;
    margin-right: 5px;
 .mfcheckbox {
    float: none;
    position: relative;
    z-index: 5;
    // vertical-align: middle;
    margin: 0 3px 0 0;
    padding: 0;
}
}
}
.t-goods {
    width: 261px;
}
.t-props {
    width: 290px;
    height: 32px;
    padding: 0 10px 0 20px;
}
.t-price {
    width: 120px;
    padding-right: 50px;
    text-align: right;
}
.t-quantity {
    width: 150px;
    text-align: center;
}
.t-sum {
    width: 162px;
    padding-right: 40px;
    text-align: right;
}
.t-action {
    // width: 110px;
}

  }

  .cart-tbody {
    margin-bottom: 20px;

    .cart-checkbox {
    z-index: 3;

    margin-right: 5px;
    .mfcheckbox {
    position: relative;
    vertical-align: middle;
    float: none;
    margin: 0 3px 0 0;
    padding: 0;
    z-index: 3;
}
    }
  .shop {
    height: 30px;
    line-height: 30px;
    padding-left: 11px;
    display: flex;

.shop-txt {
  display: flex;
    width: 42%;
    height: 30px;
    line-height: 30px;
    .shop-icon-box{
      display: flex;
      width: 25px;
      height: 25px;
      margin: 2px 5px;
      img{
        width: 100%;
        height: 100%;
      }
    }

}

}
.item-list {
    border: 1px solid #f1f1f1;
    background: #fff;
    .item-combine {
    position: relative;
    border-top: 1px solid #ccc;
   .item-item {
    border: 0;
    position: relative;
    line-height: 20px;
    background: #fff;
    padding: 0 0 1px 40px;
    clear: both;
    .item-form {
    border-top: 1px solid #f0f0f0;
    display: block;
    display: flex;
 .cell {

    padding: 15px 0 10px;
}
   .p-checkbox {
    z-index: 3;
    width: 30px;
    min-height: 10px;
    margin-left: 10px;
    position: absolute;
    left: 0;
    top: 0;
}
.p-goods {
    width: 352px;
.goods-item {
    display: block;
.p-img {
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    margin-right: 10px;
    background: #fff;
    padding: 0;
    text-align: center;
    overflow: visible;
    img{
      width: 100%;
      height: 100%;
    }
}
.p-msg{
.p-name {
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}

}
}
}
.p-props {
    width: 255px;
    min-height: 10px;
    line-height: 20px;
    overflow: hidden;
    padding: 15px 0 0 20px;

}
.p-price {
    position: relative;
    width: 190px;
    padding-right: 40px;
    text-align: center;
    outline: none;
   .p-price-cont {
    color: #333;
}
}
.p-quantity {
    width: 178px;
.quantity {
  width: 198px;
    border: 0;
    overflow: hidden;
button:disabled {
    color: #ccc;
    cursor: not-allowed;
}
   button {
    border-width: 1px;
    background: #f1f1f1;
    width: 17px;
    height: 20px;
    line-height: 16px;
    vertical-align: middle;
    position: static;
    float: left;
    outline: 0;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #cbcbcb;
    padding: 0;
}
.cart-icon-add, .cart-icon-subt {
    font-family: iconfont;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.cart-icon-subt:before {
    content: "-";
}
.cart-icon-add:before {
    content: "+";
}
input {
    border-width: 1px 0;
    width: 46px;
    position: static;
    float: left;
    outline: 0;
    text-align: center;
    box-sizing: border-box;
    height: 20px;
    color: #232326;
    border: 1px solid #cbcbcb;
    background: #fff;
    line-height: 18px;
    vertical-align: middle;
    padding: 0;
}
}
.ftx03{
    color: #aaa;
    width: 80px;
    text-align: center;
}

}
.p-sum {
    width: 93px;
    padding-right: 40px;
    text-align: right;
    font-family: verdana;
strong {
    display: block;
    color: #333;
}
}
.p-ops {

 .p-ops-item {
    display: block;
    color: #666;
}
.p-ops-item:hover{
  color: #e2231a;
}
}
}
}
}
}

}

.cart-floatbar {
    position: relative;
    height: 52px;
    z-index: 99;
    .cart-floatbar-fixed{
      width: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 -1px 8px rgba(0,1,1,.08);
    position: fixed;
    transform: translateZ(0px);
    top: auto;
    bottom: 0px;
    .cart-toolbar {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    line-height: 50px;
    .select-all {
    padding: 0 0 0 16px;
}
    .opt-batch-remove {
    margin-left: 10px;
}
.opt-batch-remove:hover{
  color: #e2231a;

}
.opt-cleaner {
    margin-left: 10px;
}
.opt-cleaner:hover {
    color: #e2231a;

}
.price-sum {
    width: 849px;
    text-align: right;
    margin-right: 20px;
    .price-show {
    display: flex;
    justify-content: right;
    .amount-sum{
      color: #999;
    cursor: pointer;
    margin: 0 10px;
    .ckeckednum{
      color: #e2231a;
    }

    }
    .total-price{
      font-size: 16px;
    color: #e2231a;
    font-family: verdana;
    font-weight: 700;
    }
}
}

.combine {
    background: #e54346;
    color: #fff;
    padding: 0 20px;
}
}
    }

}

}
</style>

